<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>留言</title>
	</head>
	<style>
		*{
			margin:0;
			padding:0
		}
		a{
			text-decoration: none;
			color:#666;
		}
		#box{
			width:990px;
			height:1740px;
			margin:20px auto;
		}
		#header{
			width:970px;
			height:30px;
			background:#fafafa;
			line-height: 30px;
			padding-left: 20px;
			font-size: 12px;
		}
		.content{
			width:970px;
			height:170px;
			border-bottom: 1px solid #dddddd;
		}
		.content-left{
			width:145px;
			height:140px;
			padding:30px 0 0 25px;
			float: left;
		}
		.eva{
			width:85px;
			height:16px;
			list-style: none;
		}
		.eva li{
			width:17px;
			height:16px;
			float:left;
			/*background:url(img/good.jpg);*/
		}
		.txt{
			width:124px;
			height:105px;
			margin-top:5px ;
		}
		.txt span{
			line-height: 24px;
			font-size: 12px;
			color:#666666;
		}
		.content-mid{
			width:580px;
			height:110px;
			padding:30px 20px;
			float: left;
			font-size: 12px;
			color:#666666;
		}
		.content-right{
			width:180px;
			height:140px;
			padding-top:30px;
			float: left;
		}
		.right-txt{
			width:180px;
			height:110px;
		}
		.right-txt span{
			line-height: 24px;
			font-size: 12px;
			color:#666666;
		}
		.right-txt img{
			width:24px;
			height:24px;
		}
		#btn{
			width:370px;
			height:100px;
			padding-top:10px;
			padding-left:600px;
		}
		#btn div{
			width:40px;
			height:30px;
			float:left;
			margin-left:5px;
			line-height: 30px;
			text-align: center;
			
		}
		.click{
			border:1px solid #cecece;
			background:#f5f4f;
		}
		.good{
			background:url(img/good.jpg);
		}
		.bad{
			background:url(img/bad.jpg);
		}
	</style>
	<script src="js/jquery.js" ></script>
	<script>
		$(function(){
//			$(window)load(function(){
//				$("#btn:fist").click();
//			})
			$("#btn>div").click(function(){
				$("#btn>div").addClass("click");
				$(this).removeClass("click");
				var i =$(this).index();
				$.ajax({
					type:"get",
					url:"http://sclub.jd.com/productpage/p-10151397633-s-0-t-5-p-"+i+".html?",
					dataType:"jsonp",
					jsonpCallback:"content",
					success:function(data){
						for(var i=0;i<$(".content").length;i++){
							var j=data.comments[i].score;
							//console.log(j)
							var aLi=$(".eva").eq(i).children();
							aLi.each(function(index){
								if(index<j){
									$(this).children("img").attr("src","img/good.jpg");
								}else{
									$(this).children("img").attr("src","img/bad.jpg");
								}
							})
							var days=data.comments[i].days;
							$(".span1").eq(i).html("收货"+days+"天后评论");
							$(".span2").eq(i).html(data.comments[i].creationTime);
							$(".span3").eq(i).html(data.comments[i].productColor);
							$(".span4").eq(i).html(data.comments[i].productSize);
							$(".content-mid").eq(i).html(data.comments[i].content);
							$(".span1R").eq(i).children("img").attr("src",data.comments[i].userImage);
							$(".span1R").eq(i).children("span").html(data.comments[i].nickname);
							$(".span2R").eq(i).html(data.comments[i].userLevelName);
							$(".span3R").eq(i).html(data.comments[i].userClientShow);
						}
					}
				});
			})
		})
	</script>
	<body>
		<div id="box">
			<div id="header">全部评论</div>
			<div class="content">
				<div class="content-left">
					<ul class="eva">
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
					</ul>
					<p class="txt">
						<span class="span1">收货6天后评论</span>
						<span class="span2">2016-05-16 08:14:30</span> </br>
						<span class="span3">黑色1件装</span> </br>
						<span class="span4">3XL(185/110)</span>
					</p>
				</div>
				<div class="content-mid">
					非常满意的一次网购，物流也很快
				</div>
				<div class="content-right">
					<p class="right-txt">
						<span class="span1R"><img src="http://misc.360buyimg.com/lib/img/u/b61.gif"/><span>gAoLOMmena</span></span></br>
						<span class="span2R">铜牌会员</span></br>
						<span class="span3R"> 来自微信购物</span>
					</p>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<ul class="eva">
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
					</ul>
					<p class="txt">
						<span class="span1">收货6天后评论</span>
						<span class="span2">2016-05-16 08:14:30</span></br>
						<span class="span3">黑色1件装</span></br>
						<span class="span4">3XL(185/110)</span>
					</p>
				</div>
				<div class="content-mid">
					非常满意的一次网购，物流也很快
				</div>
				<div class="content-right">
					<p class="right-txt">
						<span class="span1R"><img src="http://misc.360buyimg.com/lib/img/u/b61.gif"/><span>gAoLOMmena</span></span></br>
						<span class="span2R">铜牌会员</span></br>
						<span class="span3R"> 来自微信购物</span>
					</p>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<ul class="eva">
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
					</ul>
					<p class="txt">
						<span class="span1">收货6天后评论</span>
						<span class="span2">2016-05-16 08:14:30</span></br>
						<span class="span3">黑色1件装</span></br>
						<span class="span4">3XL(185/110)</span>
					</p>
				</div>
				<div class="content-mid">
					非常满意的一次网购，物流也很快
				</div>
				<div class="content-right">
					<p class="right-txt">
						<span class="span1R"><img src="http://misc.360buyimg.com/lib/img/u/b61.gif"/><span>gAoLOMmena</span></span></br>
						<span class="span2R">铜牌会员</span></br>
						<span class="span3R"> 来自微信购物</span>
					</p>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<ul class="eva">
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
					</ul>
					<p class="txt">
						<span class="span1">收货6天后评论</span>
						<span class="span2">2016-05-16 08:14:30</span></br>
						<span class="span3">黑色1件装</span></br>
						<span class="span4">3XL(185/110)</span>
					</p>
				</div>
				<div class="content-mid">
					非常满意的一次网购，物流也很快
				</div>
				<div class="content-right">
					<p class="right-txt">
						<span class="span1R"><img src="http://misc.360buyimg.com/lib/img/u/b61.gif"/><span>gAoLOMmena</span></span></br>
						<span class="span2R">铜牌会员</span></br>
						<span class="span3R"> 来自微信购物</span>
					</p>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<ul class="eva">
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
					</ul>
					<p class="txt">
						<span class="span1">收货6天后评论</span>
						<span class="span2">2016-05-16 08:14:30</span></br>
						<span class="span3">黑色1件装</span></br>
						<span class="span4">3XL(185/110)</span>
					</p>
				</div>
				<div class="content-mid">
					非常满意的一次网购，物流也很快
				</div>
				<div class="content-right">
					<p class="right-txt">
						<span class="span1R"><img src="http://misc.360buyimg.com/lib/img/u/b61.gif"/><span>gAoLOMmena</span></span></br>
						<span class="span2R">铜牌会员</span></br>
						<span class="span3R"> 来自微信购物</span>
					</p>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<ul class="eva">
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
					</ul>
					<p class="txt">
						<span class="span1">收货6天后评论</span>
						<span class="span2">2016-05-16 08:14:30</span></br>
						<span class="span3">黑色1件装</span></br>
						<span class="span4">3XL(185/110)</span>
					</p>
				</div>
				<div class="content-mid">
					非常满意的一次网购，物流也很快
				</div>
				<div class="content-right">
					<p class="right-txt">
						<span class="span1R"><img src="http://misc.360buyimg.com/lib/img/u/b61.gif"/><span>gAoLOMmena</span></span></br>
						<span class="span2R">铜牌会员</span></br>
						<span class="span3R"> 来自微信购物</span>
					</p>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<ul class="eva">
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
					</ul>
					<p class="txt">
						<span class="span1">收货6天后评论</span>
						<span class="span2">2016-05-16 08:14:30</span></br>
						<span class="span3">黑色1件装</span></br>
						<span class="span4">3XL(185/110)</span>
					</p>
				</div>
				<div class="content-mid">
					非常满意的一次网购，物流也很快
				</div>
				<div class="content-right">
					<p class="right-txt">
						<span class="span1R"><img src="http://misc.360buyimg.com/lib/img/u/b61.gif"/><span>gAoLOMmena</span></span></br>
						<span class="span2R">铜牌会员</span></br>
						<span class="span3R"> 来自微信购物</span>
					</p>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<ul class="eva">
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
					</ul>
					<p class="txt">
						<span class="span1">收货6天后评论</span>
						<span class="span2">2016-05-16 08:14:30</span></br>
						<span class="span3">黑色1件装</span></br>
						<span class="span4">3XL(185/110)</span>
					</p>
				</div>
				<div class="content-mid">
					非常满意的一次网购，物流也很快
				</div>
				<div class="content-right">
					<p class="right-txt">
						<span class="span1R"><img src="http://misc.360buyimg.com/lib/img/u/b61.gif"/><span>gAoLOMmena</span></span></br>
						<span class="span2R">铜牌会员</span></br>
						<span class="span3R"> 来自微信购物</span>
					</p>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<ul class="eva">
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
					</ul>
					<p class="txt">
						<span class="span1">收货6天后评论</span>
						<span class="span2">2016-05-16 08:14:30</span></br>
						<span class="span3">黑色1件装</span></br>
						<span class="span4">3XL(185/110)</span>
					</p>
				</div>
				<div class="content-mid">
					非常满意的一次网购，物流也很快
				</div>
				<div class="content-right">
					<p class="right-txt">
						<span class="span1R"><img src="http://misc.360buyimg.com/lib/img/u/b61.gif"/><span>gAoLOMmena</span></span></br>
						<span class="span2R">铜牌会员</span></br>
						<span class="span3R"> 来自微信购物</span>
					</p>
				</div>
			</div>
			<div class="content">
				<div class="content-left">
					<ul class="eva">
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
						<li><img src="img/good.jpg"/></li>
					</ul>
					<p class="txt">
						<span class="span1">收货6天后评论</span>
						<span class="span2">2016-05-16 08:14:30</span></br>
						<span class="span3">黑色1件装</span></br>
						<span class="span4">3XL(185/110)</span>
					</p>
				</div>
				<div class="content-mid">
					非常满意的一次网购，物流也很快
				</div>
				<div class="content-right">
					<p class="right-txt">
						<span class="span1R"><img src="http://misc.360buyimg.com/lib/img/u/b61.gif"/><span>gAoLOMmena</span></span></br>
						<span class="span2R">铜牌会员</span></br>
						<span class="span3R"> 来自微信购物</span>
					</p>
				</div>
			</div>
			<div id="btn">
				<div class="click">1</div>
				<div class="click">2</div>
				<div class="click">3</div>
				<div class="click">4</div>
				<div class="click">5</div>
			</div>
		</div>
	</body>
</html>
